<template>
  <div id="paynow">
    <div id="top">
      <span @click="gocart" class="iconfont arrow_l">&#xe6bc;</span>
      <h2>确认订单</h2>
      <p>
        <span class="iconfont">&#xf0112;</span>
        <span class="iconfont">&#xe71e;</span>
        <i class="line"></i>
      </p>
    </div>
    <div id="addres">
      <div class="box">
        <div class="add" @click="goaddpath" v-if="istrue">
         +点击完善收货地址
        </div>
        <div @click="goaddpath" v-else>
          <p class="path1">{{form.username}}  {{form.userphone}}</p>
          <p class="path2">
            {{form.location+form.useraddress}}
          </p>
        </div>
      </div>
    </div>

    <main>
      <div class="main_top">
        <div class="top">
          <p>
            <span class="iconfont">&#xe612;</span>
            <i>品牌精选</i>
          </p>
          <p>
            <span>已免运费</span>
            <span class="cur">领券</span>
            <b></b>
          </p>
        </div>
        <div class="shopping" v-for="(item,index) in orderlist" :key="index">
          <img :src="$pre+item.img" alt="" />
          <div class="minute">
            <p>{{item.goodsname}}</p>
            <p>
              <span><i>￥</i>{{item.price}}</span>
              <span>x{{item.num}}</span>
            </p>
            <p>
              <span>七天无理由退货</span>
              <span>特价</span>
            </p>
          </div>
        </div>
        <div class="bottom">
          <p>
            <span>发票类型</span>
            <span class="iconfont">不开发票 &#xe601;</span>
          </p>
          <p>
            <span>售后免邮</span>
            <span>部分商家赠送</span>
          </p>
          <p>
            <span>买家留言</span>
            <span>填写内容需要和商家协商并确认，45字以内</span>
          </p>
        </div>
      </div>
      <div class="main_bottom">
        <p>
          <span>商品金额</span>
          <span>￥{{total+num*100}}</span>
        </p>
        <p>
          <span>优惠活动</span>
          <span>-￥{{num*100}}</span>
        </p>
        <p>
          <span>优惠券</span>
          <span>暂无优惠</span>
        </p>
      </div>
    </main>

    <footer >
      <p>
        <span
          >合计
          <i>已免运费</i>
        </span>
        <span>
          ￥{{total}}
          <b>已优惠￥200元</b>
        </span>
      </p>
      <p @click="submit">确认订单</p>
      <em></em>
    </footer>
  </div>
</template>

<script>
import {addresslist,orderadd} from '../utils/api'
export default {
  data(){
    return{
      ids:"",
      num:0,
      orderlist:{},
      istrue:false,
      userinfo:"",
      total:"",
      form:{
      }
    }
  },
  methods: {
    goaddpath() {
      this.$router.push("/addpath");
    },
    gocart() {
      this.$router.push("/indexpage/shoppingcar");
    },
    submit(){
      orderadd({uid:this.userinfo.uid,countmoney:this.total.toFixed(2),countnumber:this.num,addressid:this.form.id,idstr:this.ids}).then(res=>{
        if(res.data.code==200){
          alert("添加完成，正在跳转支付页")
          this.$router.push("/pay?outTradeNo="+res.data.list.outTradeNo+"&total="+this.total)
        }else{
          alert(res.data.msg)
        }
      })
    }
  },
  mounted(){
     this.userinfo = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : {};
      let obj = JSON.parse(sessionStorage.getItem("orderpay"))
      this.orderlist =obj.arr
      this.total=obj.total
      let str=""
      this.orderlist.forEach(item=>{
        this.num+=parseInt(item.num)
        str+=item.id+","
        this.ids = str.substr(0,str.length - 1)
      })
      if(this.$route.query.id){
        let num=JSON.parse(this.$route.query.id)
        addresslist({id:num,uid:this.userinfo.uid}).then(res=>{
           this.form=res.data.list?res.data.list[0]:[]
        })
      }else{
         addresslist({uid:this.userinfo.uid}).then(res=>{
           console.log(1);
           this.form=res.data.list?res.data.list[0]:[]
           if(this.form==[]){
             this.istrue=true
           }
        })
      }
  }
};
</script>

<style scoped >
/*头部*/
#top {
  height: 0.64rem;
  padding: 0.28rem 0.1rem 0.28rem 0.33rem;
  background-color: #ff6040;
  display: flex;
  color: #ffdfd8;
  justify-content: space-between;
  align-items: center;
}
#top .arrow_l {
  font-size: 0.34rem;
}
#top h2 {
  font-size: 0.32rem;
  margin-left: 1.5rem;
}
#top p {
  height: 0.64rem;
  width: 1.75rem;
  display: flex;
  border: 1px solid #ff8a6f;
  box-sizing: border-box;
  border-radius: 0.64rem;
  align-items: center;
  position: relative;
}
#top p span {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 0.64rem;
}
#top p .line {
  width: 1px;
  height: 0.38rem;
  position: absolute;
  left: 0.87rem;
  top: 0.13rem;
  background-color: #fff;
}
#addres {
  height: 1.6rem;
  width: 100%;
  background: linear-gradient(#ff6040, #ff887d);
  position: fixed;
  left: 0;
  top: 1.2rem;
  z-index: 2;
}
#addres .box {
  height: 2.08rem;
  width: 7.1rem;
  background-color: #fff;
  border-radius: 0.1rem;
  left: 0.2rem;
  padding: 0.4rem 0.57rem 0 0.43rem;
  box-sizing: border-box;
  position: absolute;
  top: 0;
}
#addres .box .add {
  width: 3.7rem;
  height: 0.68rem;
  border: 1px solid #d2a470;
  border-radius: 5px;
  background-color: #fdf6ec;
  color: #ff963e;
  font-size: 0.3rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.68rem;
  margin: auto;
}
#addres .box .path1 {
  font-size: 0.32rem;
}
#addres .box .path2 {
  font-size: 0.26rem;
  margin-top: 0.2rem;
  color: #666666;
}
/*主体*/
main {
  flex: 1;
  overflow: auto;
  margin-top: 2.8rem;
  padding-bottom:2rem ;
  box-sizing: border-box;
}
main .main_top {
  margin-top: 0.68rem;
  background-color: #fff;
}
main .main_top .top {
  height: 1.12rem;
  padding: 0.4rem 0.22rem 0.35rem 0.22rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .main_top .top p:nth-child(1) span {
  height: 0.32rem;
  width: 0.32rem;
  background-color: #ff6040;
  border-radius: 50%;
  font-size: 0.3rem;
  text-align: center;
  color: #fff;
}
main .main_top .top p:nth-child(1) i {
  font-size: 0.3rem;
  color: #333333;
}
main .main_top .top p:nth-child(2) {
  font-size: 0.22rem;
  width: 1.8rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
main .main_top .top p:nth-child(2) .cur {
  color: #ff6040;
}
main .main_top .top p:nth-child(2) b {
  height: 0.22rem;
  width: 0.01rem;
  background-color: #979797;
  position: absolute;
  left: 1.15rem;
  top: 0.05rem;
}
main .main_top .shopping {
  padding: 0 0.2rem 0 0.2rem;
  display: flex;
  justify-content: space-between;
}
main .main_top .shopping img {
  height: 2.18rem;
  width: 2.68rem;
}
main .main_top .shopping .minute {
  width: 4.65rem;
  height: 2.18rem;
}
main .main_top .shopping .minute p:nth-child(1) {
  font-size: 0.3rem;
}
main .main_top .shopping .minute p:nth-child(2) {
  margin-top: 0.38rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .main_top .shopping .minute p:nth-child(2) span:nth-child(1) {
  color: #ff6040;
  font-size: 0.3rem;
}
main .main_top .shopping .minute p:nth-child(2) span:nth-child(1) i {
  font-size: 0.2rem;
}
main .main_top .shopping .minute p:nth-child(2) span:nth-child(2) {
  font-size: 0.24rem;
}
main .main_top .shopping .minute p:nth-child(3) {
  margin-top: 0.25rem;
}
main .main_top .shopping .minute p:nth-child(3) span {
  line-height: 0.32rem;
  padding: 0 0.07rem;
  background-color: #ff6040;
  color: #fff;
}
main .main_top .bottom {
  height: 2.52rem;
  padding: 0.6rem 0.2rem 0;
  box-sizing: border-box;
}
main .main_top .bottom p {
  display: flex;
  justify-content: space-between;
  font-size: 0.22rem;
}
main .main_top .bottom p:nth-child(1) span {
  font-weight: bold;
  font-size: 0.22rem;
}
main .main_top .bottom p:nth-child(1) span.iconfont {
  font-weight: lighter;
}
main .main_top .bottom p:nth-child(2) {
  margin-top: 0.4rem;
}
main .main_top .bottom p:nth-child(2) span {
  font-weight: bold;
}
main .main_top .bottom p:nth-child(2) span:nth-child(2) {
  color: #6c6c6c;
  font-weight: lighter;
}
main .main_top .bottom p:nth-child(3) {
  margin-top: 0.4rem;
}
main .main_top .bottom p:nth-child(3) span {
  font-weight: bold;
}
main .main_top .bottom p:nth-child(3) span:nth-child(2) {
  color: #6c6c6c;
  font-weight: lighter;
}
main .main_bottom {
  height: 2.8rem;
  padding: 0 0.2rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 0.2rem;
}
main .main_bottom p {
  font-size: 0.24rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
main .main_bottom p span {
  font-weight: bold;
}
main .main_bottom p:nth-child(1) span:nth-child(2) {
  color: #666666;
  font-weight: lighter;
}
main .main_bottom p:nth-child(2) span:nth-child(2) {
  color: #ff6040;
  font-weight: lighter;
}
main .main_bottom p:nth-child(3) span:nth-child(2) {
  font-weight: lighter;
}
footer {
  height: 1.67rem;
  width: 7.5rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 0 0.67rem 0.2rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
}
footer p:nth-child(1) {
  display: flex;
  justify-content: space-between;
  width: 3.5rem;
  align-items: center;
}
footer p:nth-child(1) span {
  display: flex;
  flex-direction: column;
}
footer p:nth-child(1) span:nth-child(1) {
  align-items: flex-start;
  font-size: 0.3rem;
  font-weight: bold;
}
footer p:nth-child(1) span:nth-child(1) i {
  font-size: 0.2rem;
  color: #b6b6b6;
}
footer p:nth-child(1) span:nth-child(2) {
  align-items: flex-end;
  font-size: 0.3rem;
  font-weight: bold;
  color: #ff6040;
}
footer p:nth-child(1) span:nth-child(2) b {
  font-size: 0.2rem;
  color: #b6b6b6;
}
footer p:nth-child(2) {
  width: 2.2rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #ff6040;
  text-align: center;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
}
footer em {
  width: 2.68rem;
  height: 0.1rem;
  background-color: #000;
  position: absolute;
  bottom: 0.16rem;
  left: 2.6rem;
  border-radius: 0.05rem;
}
</style>